<template>
	<div>
		<van-nav-bar
		  style="background-color: #07C160;"
		>
		<template #title>
			<span style="color:#fff">发布</span>
		</template>
		</van-nav-bar>
		<div class="zhong">
			<div class="biaoti">
				<van-cell-group class="biaoti">
				  <van-field v-model="title" 
				  placeholder="请输入标题" />
				</van-cell-group>
			</div>		
			<div class="biaoti" @click="picker_show=true">
				<van-cell-group class="biaoti" >
				  <van-field v-model="cate_name" 
				  readonly
				  placeholder="请选择分类" />
				</van-cell-group>
			</div>
			
			<div class="neirong">
				<van-field
				  v-model="content"
				  rows="8"
				  autosize
				  type="textarea"
				  placeholder="请输入内容"
				/>
			</div>
			<van-uploader
			  v-model="fileList" 
			  multiple
			  :max-count="3"
			 :max-size="500 * 1024"  />
			
			<div style="margin: 16px;">
			    <van-button 
				 style="background-color: #07C160;"
				round block
				 type="primary" 
				@click="submit"
				>确定</van-button>
			  </div>
		</div>
		<van-popup v-model="picker_show" position="bottom" :style="{ height: '50%' }">
			
		<van-picker
		  title="请选择分类"
		  show-toolbar
		  :columns="columns"
		  @confirm="onConfirm"
		  value-key="name"
		  @cancel="picker_show = false"
		/>
			
		</van-popup>
	</div>
</template>

<script>
	export default {
		
	  data() {
		  	let cate_list = localStorage.getItem('cate_list'); //  字符串
			cate_list = cate_list?JSON.parse(cate_list):[]
	    return {
	      title: '', // 标题
		  content:'',
		  cate_name:'',// 分类
		  cate_id:"",
		  picker_show:false,
		 columns: cate_list,
		 fileList:[]
	    };
	  },
	  methods:{
		  // picker 确认
		  onConfirm(value, index){
			  
			  console.log(value, index)
			  let {_id:cate_id,name} = value;
			  
			  this.cate_name = name;
			  this.cate_id = cate_id;
			  
			  
			  this.picker_show = false;
			  
		  },
		  async submit(){
			  
			  let {title,content,cate_name,cate_id,fileList}  = this;
			  
			  let uid = localStorage.getItem('uid')
			  
			  if(!uid){
				  this.$toast('请先登录');
				  
				  setTimeout(_=>{
					  this.$router.push('/login')
				  },500)
				  return
			  }
			  
			  
			  let username = localStorage.getItem('username');
			  
			  
			  console.log(title)
			  console.log(content)
			  console.log(cate_name,)
			  console.log(cate_id)
			  console.log(fileList);  
			  console.log(uid)
			  console.log(username)
			  
			  // 数据校验
			  
			  // 先上传图片   图片上传到七牛云   拿到线上的图片地址 
			  
			  // imgSrc = 拿到线上的图片地址
			  
			  let imageSrc = [];//  接收图片的src 
			  
		
			  
			  if(this.fileList.length>0){
				  
				  this.$toast.loading({
				    message: '图片上传中...',
				    loadingType: 'spinner',
				  });
				  
				  console.log(this.fileList);  //33
				  
				  let promise_upload_task = [];
				  			
				  for(let i = 0;i<this.fileList.length;i++){
					  let  _file = this.fileList[i].file;
					  
					  
					  let upload_task = this.$store.dispatch('qnUpload',_file)
					  
					  promise_upload_task.push(upload_task)
				  	 // let img = await  this.upload(i); //  img 七牛云上的路径 
					// imageSrc.push(img)
				  }
				  // 多次resolve的结果 组成一个数组
				  
				imageSrc = await Promise.all(promise_upload_task)
				  
				  
			  }
	       console.log(imageSrc)
			  // title	string	是	标题	
			  // content	string	是	内容	
			  // cate_name	string	是	分类名字	
			  // cate_id	string	是	分类ID	
			  // author	string	是	发布者名字	
			  // author_id	string	是	发布者ID	
			  // imageSrc	string	是	文章封面图 数组形式，放图片的链接 最多三张
			  this.$toast.loading({
			    message: '正在发布...',
			    loadingType: 'spinner',
			  });
			  this.$http.post('/api/add_article',{
				  title,
				  content,
				  cate_name,
				  cate_id,
				  author:username,
				  author_id:uid,
				  imageSrc
			  }).then(res=>{
				  
				  console.log(res)
				  if(res.code==0){
					  ['title','content','cate_name','cate_id','fileList'].forEach(v=>{
						  if(v==='fileList'){
							  this[v] = [];
						  }else{
							    this[v] = '';
						  }
						  
					  })
					  let publish_num = this.$store.state.publish_num;
					  this.$store.commit('SET_DATA',{
						  key:'publish_num',
						  value:publish_num++
					  })
					  this.$toast('发布成功');
				  }else{
					  this.$toast.fail(res.msg)
				  }
				  
				  
			  })
			  
			  
			  
			  
			  
		  },
		  

	  }
	};
</script>

<style>
	.zhong{
		background-color: #fcfcfc;
		height: 1150px;
	}
	.biaoti{
		padding-top: 20px;
	}
	.neirong{
		padding-top: 20px;
	}
</style>
